<template>
	<view class="body">
		<view class="bg-orange top p40">
			<u-navbar autoBack placeholder bgColor='transparent' left-icon-color="#fff"></u-navbar>
			<view class="f36 fb white">油价变动随时掌握</view>
			<view class="order bg-white mt20 p30 br12">
				<view class="d-s-c">
					<text class="f32 mr20">今日指导价</text>
					<text class="gray9 f26">调价日:预计2025年3月6日</text>
				</view>
				<scroll-view scroll-x class="scroll d-f f26 mt40">
					<view class="item tc" v-for="(item,index) in menu" :key="index">
						<view class="fb">{{item.name}}</view>
						<view class="red mt10 d-c-c"><text class="fb">￥</text> {{item.price}}/L</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="d-b-c p40 mt80">
			<view class="">附近好站</view>
			<view class="gray9 d-c-c" @click="jump('/pages/tabbar/index')">
				<text class="mr10">更多油站</text>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		<view class="list pl40 pr40 mb40">
			<view class="item bg-white p20 mb20 br14" v-for="(item,index) in list" :key="index"
				@click="jump('/pages/mete/detail')">
				<view class=" d-b-c">
					<view class="tilte f30">{{item.title}}</view>
					<view class="tag1 d-c-c f20">
						<image class="mr5" src="@/static/image/distance.png" mode="widthFix"></image>
						{{item.distance}}KM
					</view>
				</view>
				<view class="gray6 mt15 f20">{{item.address}}</view>
				<view class="d-b-c mt20">
					<view class="d-s-c left">
						<u-tag :text="item.tag" bgColor="#FF7E11" color="#fff" borderColor="transparent"></u-tag>
						<view class="fb f30 mr20 ml20">￥{{item.price}}/L</view>
						<view class="d-c-c f24 gray9">
							<image class="mr10" src="@/static/image/shijian.png" mode="widthFix"></image>24h
						</view>
					</view>
					<view class=""><u-button text="一键支付" size="mini" shape="circle" plain color="#FF7E11"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="pos p40 ww100">
			<u-button text="分享" color="#FF7E11" shape="circle"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [{
					name: "92#",
					price: "7.69"
				}, {
					name: "92#",
					price: "7.69"
				}, {
					name: "92#",
					price: "7.69"
				}, {
					name: "92#",
					price: "7.69"
				}, {
					name: "92#",
					price: "7.69"
				}, {
					name: "92#",
					price: "7.69"
				}],
				list: [{
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}, {
					title: '江门市利洁能源加气站',
					address: "广东省江门市江海区五邑路与永康路交叉路口往南约90米",
					distance: "30",
					tag: 'LNG',
					price: '5.5',
				}],
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.pos {

		bottom: 0;
		position: fixed;
		left: 50%;
		transform: translate(-50%);
	}

	.list {
		.item {
			.tag1 {
				background-color: #EFEFEF;
				width: 100rpx;
				height: 30rpx;
				border-radius: 10rpx;

				image {
					width: 20rpx;
				}
			}

			.left {
				image {
					width: 40rpx;
				}
			}
		}
	}

	.scroll {
		white-space: nowrap;

		.item {
			display: inline-block;
			width: 25%;
		}
	}

	.top {
		height: 400rpx;
	}
</style>